import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { Relax } from 'iflux2'
import { List, fromJS } from 'immutable'
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');

const seriesArray = {
    'wxFans': {
        'new_user': '新增粉丝',
        'cancel_user': '跑路粉丝',
        'cumulate_user': '总粉丝',
    },
    'wxInteraction': {
        'msg_count': '接收消息',
        'msg_send_count': '发送消息',
        'msg_user': '互动人数'
    }
}

@Relax
export default class Charts extends Component {

    static defaultProps = {
        fansInfo: List(),
        type: '',
        title: ''
    }

    componentDidUpdate() {
        const { type } = this.props;
        const _this = this;
        echarts.init(ReactDOM.findDOMNode(this.refs[type])).setOption(_this._getOption())
    }

    render() {
        return (
            <div className="chartsArea">
                <p>{this.props.title}</p>
                <div ref={this.props.type}></div>
            </div>
        )
    }

    _getOption = () => {
        const { fansInfo, type } = this.props;
        let xAxis = { data: [] };
        let color = ["#f36a5a", "#5491de", "#45be89", "#72ccff", "#f7c5a0", "#d4a4eb", "#d2f5a6", "#76f2f2"];
        let series = List();
        let yAxis = { minInterval: 1, type: 'value', scale: true};
        let legend = { top: 20, left: 'center', data: [] };
        let tooltip = {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                axis: 'x',
                label: {
                    show: true
                }
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
                color: '#000'
            },
            extraCssText: 'width: 150px'
        };
        fansInfo.forEach(item => {
            //横坐标获取
            const curKey = item.keySeq().first();
            xAxis.data.push(curKey);
            //获取多个线条
            item.get(curKey).map((value, key) => {
                //只处理seriesArray符合当前type的数据
                if (seriesArray[type].hasOwnProperty(key)) {
                    //判断series是否已经有当前key的数据集合了，没有新建，有则追加
                    let curIndex, curName = seriesArray[type][key];
                    const curSeriesFilter = series.filter((i, index) => {
                        if (i.get('name') == curName) {
                            curIndex = index;
                            return true
                        }
                    });
                    if (curSeriesFilter.size == 0) {
                        series = series.push(fromJS({
                                name: curName,
                                symbol: 'circle',
                                type: 'line',
                                data: [value]
                        }));
                        legend.data.push(curName)
                    } else {
                        series = series.set(curIndex, curSeriesFilter.get(0).update('data', d => d.push(value)))
                    }
                }
            })
        });
        series = series.toJS();
        return {
            color,
            legend,
            tooltip,
            xAxis,
            yAxis,
            series
        }
    }
}